<script setup>
  import { ref } from 'vue'
  import { useRouter } from 'vue-router'
  import { HeartOutlined, HeartFilled } from '@ant-design/icons-vue'
  import { message } from "ant-design-vue";
  import {isLogin} from "@/utils/index.js";
  import { useCommStore } from '@/stores'
  import {addToCartApi} from "@/api/modules/cart.js";
  import {collectApi} from "@/api/index.js";
  const props = defineProps({
    info: {
      type: Object,
      required: true
    },
    isCollect: {
      type: Boolean,
      default: true
    }
  })
  const router = useRouter()
  const emit = defineEmits(["collect"])
  const goDetail = () => {
    router.push(`goods?spu=${props.info?.spu}&type=goods`)
  }
  const addToCart = () => {
    const { shopId } = useCommStore()
    if (isLogin(true)) addToCartApi({sku: props.info.sku, num: 1, shop_id: shopId}).then(res => {
      message.success('添加成功')
    })
  }
  const collectGoods = () => {
    if (isLogin(true)) collectApi({type: 2, id: props.info.id}).then(res => {
      emit('collect')
      message.success('操作成功')
    })
  }
</script>

<template>
  <div class="goods-item" @click="goDetail">
    <div class="is-collect" @click.stop="collectGoods" v-if="isCollect">
      <component :is="info?.is_collection === 1?HeartFilled:HeartOutlined" style="font-size: 18px; color: var(--primary)"/>
    </div>
    <div class="goods-img">
      <img :src="info?.img" alt="" class="goods-thumb">
      <div class="tag-list" v-if="info?.label_arr?.length">
        <a-tag v-for="tag in info?.label_arr" :key="tag"> {{ tag }} </a-tag>
      </div>
    </div>
    <div class="goods-info">
      <div class="goods-name"> {{ info?.name }} </div>
<!--      <div> 供货商：{{ info?.supplier_name }} </div>-->
      <div class="goods-price-mark">
        <div class="goods-price">
          <div class="new-p"> {{ info?.price }} </div>
          <div class="old-p"> {{ info?.original_price }} </div>
        </div>
        <div class="goods-mark"> 评分 {{ info?.score }} </div>
      </div>
      <a-button type="primary" style="background: var(--primary)" @click.stop="addToCart"> 加入购物车 </a-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .goods-item {
    width: 100%;
    max-width: 300px;
    overflow: hidden;
    border-radius: 15px;
    background-color: #fff;
    position: relative;
    cursor: pointer;
    .is-collect {
      position: absolute;
      top: 12px;
      right: 12px;
      z-index: 9;
      cursor: pointer;
    }
    .goods-img {
      width: 100%;
      padding-bottom: 130%;
      position: relative;
      background-color: #f8f8f8;
      .goods-thumb {
        position: absolute;
        width: 100%;
        height: 100%;
      }
      .tag-list {
        position: absolute;
        right: 0;
        bottom: 10px;
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
    }
    .goods-info {
      width: 100%;
      gap: 5px;
      display: flex;
      flex-direction: column;
      padding: 10px 12px;
      .goods-name {
        width: 100%;
        font-weight: bold;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .goods-price-mark {
        color: #999;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .goods-price {
          display: flex;
          font-weight: bold;
          align-items: end;
          .new-p {
            color: red;
            font-size: 16px;
            line-height: 16px;
          }
          .old-p {
            line-height: 12px;
            margin-left: 5px;
            text-decoration: line-through;
          }
        }
        .goods-mark {
          color: red;
        }
      }
      .ant-btn {
        width: 100%;
        margin-top: 10px;
      }
    }
  }
</style>